<template>
	<view class="jingli">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar backgroundColor="#fff" color="#101010" :fixed='true' left-icon="back" right-text="保存" title="添加工作经历" @clickRight="add_work" @clickLeft="back"></uni-nav-bar>
		<view class="time">
			<view class="start">
				<image src="../../static/img/shike.png" mode=""></image>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month" style="font-size:28upx;width: 240upx;">
					<view class="uni-input">{{ date }}</view>
				</picker>
			</view>
			<text>～</text>
			<view class="end">
				<image src="../../static/img/shike.png" mode=""></image>
				<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange_1" fields="month" style="font-size: 28upx;width: 240upx;">
					<view class="uni-input">{{ date1 }}</view>
				</picker>
			</view>
		</view>
		<view class="msg">
			<textarea v-model="content" placeholder="请输入" maxlength="20" />
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {

		data(){
			return{
					date:"开始时间",
					date1:"结束时间",
					content:'',
					sp_id:''
				}
			},
			computed:{
				...mapGetters([
				  "workArr"
				]),
				startDate() {
				    return this.getDate('start');
				},
				endDate() {
				    return this.getDate('end');
				},
				},
				onLoad(e) {
					this.sp_id = e.sp_id
				},
		methods:{
				getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}年${month}月`;
				},
				bindDateChange: function(e) {
					var str = (e.target.value).replace(/-/, "-")
					this.date = str
				},
				bindDateChange_1: function(e) {
					var str = (e.target.value).replace(/-/, "-")
					this.date1 = str
				},
				back(){
					uni.navigateBack({})
				},
				addWorkExp(sp_id,startTime,endTime,content){
					this.$store.dispatch("addWorkExp",{sp_id:sp_id,startTime:startTime,endTime:endTime,content:content}).then(res=>{
						if(res.code == 1){
							console.log(res)
							uni.navigateBack({})
							uni.$emit('addwork', {
							    data:'yes'
							})
						}else{
							uni.showToast({
								icon:"none",
								title:res.msg
							})
						}
					})
				},
				add_work(){
					
					if(this.date == '开始时间'){
						uni.showToast({
							icon:"none",
							title:'请选择开始时间'
						})
					}else if(this.date1 == "结束时间"){
						uni.showToast({
							icon:"none",
							title:'请选择结束时间'
						})
					}else if(this.content == ''){
						uni.showToast({
							icon:"none",
							title:'请请输入工作经历'
						})
					}else{
						if(this.sp_id){
							this.addWorkExp(this.sp_id,this.date,this.date1,this.content)
							
						}else{
							
							console.log(this.date)
							console.log(this.date1)
							console.log(this.content)
							console.log(this.workArr)
							this.workArr.push({'content':this.content,'startTime':this.date,'endTime':this.date1})
							uni.navigateBack({})
						}
					}
					
				}
			
			}
			
		
		}
	
</script>

<style lang="scss" scoped>
	.uni-picker{
		
		}
	.jingli{
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		.time{
			display: flex;
		   padding: 0 28upx;
			height: 88upx;
			line-height: 88upx;
			background: white;
			border-top:2upx solid #eee;
			font-weight: 600;
			width: calc(100% - 56upx);
			display: flex;
			justify-content: space-around;
			image {
				height: 36upx;
				width:36upx;
				border-radius: 50%;
				float: left;
				margin-top: 28upx;
				margin-right: 14upx;
			}
		
			}
			.msg{
				width: 100%;
				height: 244upx;
				margin-top: 20upx;
				background: white;
				textarea{
					width: calc(100% - 56upx );
					padding: 24upx 28upx;
					
					}
				
				}
		}
</style>
